{extend name="base" /}
{block name="body"} 
<style>
    .left{
        display:inline;display:inline-block;
        }
</style> 
<div class="layui-card">
        <div class="layui-form toolbar">
            <div>
                <form action="{:request()->url()}" class="layui-form" method="get">
            
                <div class="left">
                    
                    <input type="text" id="subtitle" name="subtitle" class="layui-input" placeholder="输入字段数据" autocomplete="off">
                    
                </div>
                <div class="left">
                    <input type="text" name="create_time" class="layui-input" id="create_time" placeholder="{:__('Created on')}">
                </div>

                <div class="left">
                    <button class="layui-btn layui-btn-normal"><i class="fa fa-search"></i> 搜索</button>
                </div>
                </form>
          
        </div>
    
    <table id="tableList" lay-filter="tableList"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" id="dropdownButton">
      下拉按钮 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
      </div>
</script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('article/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="600px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>{:__('modify')}</a>
        <a href="{:url('article/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除文章{{d.title}}"><i class="layui-icon layui-icon-delete"></i>{:__('delete')}</a>
    </script>
 
<script type="text/html" id="status">
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="{:__('normal')}|{:__('locking')}" data-url="{:url('article/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
    </script>
    
    <script type="text/html" id="img">

    <div><img src="{{ d.image }}" class="layui-upload-img layui-circle" style="width: 30px; height: 30px;"></div>
</script>

</div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(function () { 
      // 获得需要的内置组件
        var $ = layui.jquery;
        var layer = layui.layer; // 弹层
        var form = layui.form; // 表单 
        var table = layui.table; // 表格
        var laypage = layui.laypage; // 分页
        var dropdown = layui.dropdown;  // 下拉菜单
        var laydate = layui.laydate;  // 日期
        // 搜索 start 引入时间组件laydate---------------------
        // 时间
        laydate.render({
            elem: '#create_time',
            theme: 'molv',
            trigger:'click',
            range: true
        });
        // 渲染回访表格
        table.render({
            elem: '#tableList',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('article/index_json',['subtitle'=>input('subtitle'), 'create_time'=>input('create_time')])}",
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: '<em>首页</em>' //不显示首页
            ,last: '<em>尾页</em>' //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            ,limit:'15'
            ,limits:['15','30','50','100','200','500']
            } , 
            lineStyle: 'height: 100px;',//图片高度
            cellMinWidth: 100,
            size:'lg',even:true,
            cols: [[
                  {
                    type: 'checkbox'
                }, {
                    type:'numbers',
                    title:'#', 
                    width: 100
                }, {
                    field: 'image', 
                    align: 'center', 
                    templet: function (d) {
                        var url = d.image;
                        return '<img src="' + url + '" class="tdImg" tb-img/>';
                     }, 
                     title: '图片', 
                     width: 150, 
                     unresize: true
                }, {
                    field: 'cat_name', 
                    title: '所属栏目', 
                    align: 'center', 
                    width: 100,
                    templet:function (d) {
                        return  '<span class="layui-btn layui-btn-xs">' + d.cat_name + '</span>';
                     }
                }, {
                    field: 'title', 
                    title: '标题', 
                    width: 150,
                    templet:function (d){
                        return '<a href="{:getMyUrl()}/detail/index?Art=' + d.id + '&ZcT=' + d.cat_id + '" target="_blank">' + d.title + '</a>';
                     }
                }, {
                    field: 'flag', 
                    title: '标志', 
                    align: 'center', 
                    width: 80,
                    templet:function (d) {
                        return  d.flag==1 ? '<span class="layui-btn layui-btn-xs">最新</span>' : (d.flag == 2 ? '<span class="layui-btn layui-bg-red layui-btn-xs">热门</span>' : '<span class="layui-btn layui-bg-orange layui-btn-xs">推荐</span>');
                     }
                }, {
                    field: 'weigh', 
                    title: '排序', 
                    align: 'center', 
                    width: 80,
                    sort : true,
                    templet:function (d) {
                        return  d.weigh==1 ? '<span class="layui-btn layui-bg-red layui-btn-xs">置顶</span>' : '<span class="layui-btn layui-btn-xs">正常</span>';
                     }
                }, {
                    field: 'create_time', 
                    title: '添加时间', 
                    align: 'center', 
                    width: 160
                }, {
                    align: 'center', 
                    sort: true, 
                    title: '状态',
                    templet:'#status',
                    width:90
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 180
                }
            ]],
    done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
        data: [{
          id: 'add',
          title: '添加文章'
        },{
          id: 'delete',
          title: '多选删除'
        },{
          id: 'refresh',
          title: '刷新数据'
        },{
          id: 'cancelAll',
          title: '取消审核'
        },{
          id: 'Enable',
          title: '全部审核'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加',
                type: 2,
                area: ['400px','100%'],
                content: "{:url('article/add')}",
              });
            break;
            case 'delete':
              if(data.length <= 0) return layer.msg('请选择一行');
             
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {return layer.msg('{:__('Please select a line')}', {icon: 0});}
                layer.confirm('确定删除?', {icon: 0}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/article/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
              
            break;
            case 'refresh':
                 location.reload();
              layer.msg('刷新成功！');
            break;  
            case 'cancelAll':
                  layer.confirm('全部取消审核', {icon: 2}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/article/statuslog?uid=0', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
            break;
            case 'Enable':
                  layer.confirm('全部启用审核', {icon: 1}, function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/article/statuslog?uid=1', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
            break;
          }
        }
      });
    },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });

    });
      
        //头工具栏事件
        // table.on('toolbar(tableList)', function (obj) {
        //     var checkStatus = table.checkStatus(obj.config.id);
        //     switch (obj.event) {
        //         case 'delete':
             
        //             var data = checkStatus.data;
        //             var ids = [];
        //             data.forEach(item => {
        //                 ids.push(item.id);
        //             });
        //             if (ids <= 0) {return layer.msg('{:__('Please select a line')}', {icon: 0});}
        //         layer.confirm('<i class="layui-icon layui-icon-help" style="font-size: 16px; color: #1E9FFF;"></i>确定删除?', function (index) {
        //          var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
        //           $.post('/article/del', {id: ids}, function (res) {
        //                 if (res.code == 0) {
        //                     layer.msg(res.msg, {icon: 1});
        //                     setTimeout(function () {
        //                         location.reload();  // 页面刷新
        //                     }, 1500)
        //                 } else {
        //                     layer.msg(res.msg, {icon: 0});
        //                 }
        //             }, 'json');
        //           });
        //             break;
        //         case 'refresh':
        //             location.reload();
        //             break;
        //     }
        // });

</script>
{/block}